<template>
  <div style=" margin: auto; width: 80%; border: 1px solid #ccc; padding: 20px;">

  <div style="border: 1px solid #ccc; margin: auto;margin-bottom: 30px; margin-top: 20px; padding: 20px; ">
    <div class="card-header">
      <span>货代询价</span>
    </div>


<el-form  label-width="100px">
  <el-form :inline="true" >

    <el-form-item label="询价编码">
      <el-input  v-model="filters.sn" placeholder="请输入" clearable />
    </el-form-item>

     <el-form-item label="订单编码">
      <el-input v-model="filters.order_sn"  placeholder="请输入" clearable />
    </el-form-item>

   <el-form-item label="状态">
      <el-select style="width: 150px"
        v-model="filters.status"
        placeholder="全部"
        clearable
      >
        <el-option label="待报价" value="0" />
        <el-option label="报价中" value="1" />
        <el-option label="已报价" value="2" />
      </el-select>
      
    </el-form-item>




    <el-form-item>
      <el-button type="primary" @click="initData">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
</el-form>
</el-form>

  </div>


    <!--功能按钮-->
    <div style="text-align: right">
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        label="行号"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column prop="sn" label="询价编码" width="180" />
      <el-table-column prop="order_sn" label="订单编码" width="120" />
      <el-table-column prop="create_time" label="询价时间" width="120" />
      <el-table-column prop="status" label="状态" width="120" >
         <template v-slot="{ row }">
        
          {{ row.status == 0 ? "待报价" : row.status == 1 ? "报价中" : "已报价" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="500" align="center">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            title="编辑"
            @click="update(row.employee_id)"
          />
          <el-button type="primary">查看报价</el-button>
          <el-button type="primary">催促报价</el-button>
          <el-button type="primary">更新出运</el-button>
          <el-button type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: azure;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper" 
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
//引入api接口
import { queryFreightInquiry, addFreightInquiry } from "@/api/freightInquiry.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
import { el } from "element-plus/es/locale/index.mjs";
import { ElMessage, ElMessageBox } from "element-plus";


//查询数据
async function queryData() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    sn: filters.value.sn,
    order_sn: filters.value.order_sn,
    status: filters.value.status,
  };
}

//过滤条件
const filters = ref({
  sn: "",
  order_sn: "",
  status: "",
});

//重置
function reset() {
  filters.value = {
    sn: "",
    order_sn: "",
    status: "",
  };
  initData();
}

//表单数据
const tableData = ref([{ quote_coding: "123456"}]);

//路由实例
const router = useRouter();

//添加客户
function handleAdd() {
  router.push("/freightInquiry/add");
}
//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}
//编辑
function update(employee_id) {
  //console.log("编辑", employee_id)
  router.push({ path: "/freightInquiry/update", query: { employee_id } });
}

//当前页变化
function chgpg(pg) {
  page.value = pg;
  initData();
}
//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    sn: filters.value.sn,
    order_sn: filters.value.order_sn,
    status: filters.value.status,
  };

  console.log("请求参数:", data); // 打印请求参数
    
  let res = await queryFreightInquiry(data);

  console.log("API返回数据:", res); // 打印返回结果
 
  if (res.code == 200) {
    //设置数据
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }


}

//生命周期函数
onMounted(() => {
  initData();

});
</script>

<style scoped>
.card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;

}</style>
